<link href="${request.contextPath}/resources/bwizard/bwizard.min.css" rel="stylesheet">
<script type="text/javascript" src="${request.contextPath}/resources/bwizard/bwizard.min.js"></script>
<link href="${request.contextPath}/resources/prettify/prettify.css" rel="stylesheet">
<script type="text/javascript" src="${request.contextPath}/resources/prettify/prettify.js"></script>
<div class="main">
<div class="row">
	<div class="col-md-1"></div>
	<div class="col-md-3">
		<h2>集群管理</h2>
		<p>集群状态查看，运维等。</p>
		<p><a class="btn btn-success" data-target="#clusterModal" data-toggle="modal">查看详情 &raquo;</a></p>
	</div>
	<div class="col-md-3">
		<h2>流程审核</h2>
		<p>所有需要审批的流程都在此处理。</p>
		<p><a class="btn btn-success" data-target="#auditModal" data-toggle="modal">查看详情 &raquo;</a></p>
	</div>
	<div class="col-md-3">
		<h2>监控管理</h2>
		<p>所有的监控预警数据在此查看。</p>
		<p><a class="btn btn-success" data-target="#monitorModal" data-toggle="modal">查看详情 &raquo;</a></p>
	</div>
	<div class="col-md-1"></div>
</div>
<div class="row">
	<div class="col-md-1"></div>
	<div class="col-md-3">
		<h2>用户管理</h2>
		<p>用户相关查看，管理。</p>
		<p><a class="btn btn-success" data-target="#userModal" data-toggle="modal">查看详情 &raquo;</a></p>
	</div>
	<div class="col-md-3">
		<h2>机器管理</h2>
		<p>所有机器配置，数据监控等。</p>
		<p><a class="btn btn-success" data-target="#machineModal" data-toggle="modal">查看详情 &raquo;</a></p>
	</div>
	<div class="col-md-3">
		<h2>其他</h2>
		<p>通知管理，客户端版本等等。</p>
		<p><a class="btn btn-success" data-target="#clientDemoModal" data-toggle="modal">查看详情 &raquo;</a></p>
	</div>
	<div class="col-md-1"></div>
</div>

<!-- 集群管理 -->
<div id="clusterModal" class="modal fade" tabindex="-1" data-width="400">
	<div class="modal-dialog" style="width:980px">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title">集群管理</h4>
			</div>
			<div class="modal-body">
				<div class="wizard">
					<ol>
						<li>集群发现</li>
						<li>+NameServer</li>
						<li>集群管理</li>
						<li>+broker</li>
						<li>停写</li>
						<li>下线</li>
					</ol>
					<div>
						<p>1.主要用于NameServer的发现和运维：</p>
						<div class="text-center">
							<img src="${request.contextPath}/img/admin/intro/cluster_found.png" class="img-rounded">
						</div>
						<p>2. +集群记录：用于往cluster表新增一条记录：</p>
						<div class="text-center">
							<img  class="text-center" src="${request.contextPath}/img/admin/intro/cluster_add.png" class="img-rounded">
						</div>
						<br>
						<div>
						<p>3. 所谓集群发现是指<b>客户端通过域名的方式发现Name Server集群，继而发现broker集群。或者broker通过域名的方式发现Name Server。</b></p>
						<p>1. 客户端：</p>
						<p>&nbsp;&nbsp;&nbsp;&nbsp;客户端通过编码+属性设置的方式来实现，关键代码如下：</p>
						<pre class="prettyprint">
// 设置Name Server域名
setProperty("rocketmq.namesrv.domain", "${nameServerDomain}");
// 设置单元名
clientConfig.setUnitName("clusterId");
</pre>					
						<p>2. broker：</p>
						<p>&nbsp;&nbsp;&nbsp;&nbsp;broker通过配置来实现，关键配置如下：</p>
						<pre class="prettyprint">
rmqAddressServerDomain=${nameServerDomain}
rmqAddressServerSubGroup=nsaddr-1
fetchNamesrvAddrByAddressServer=true
</pre>						
						<p>3. 无论通过哪种方式，均取决于rocketmq的Name Server发现逻辑的URL拼装代码：</p>
						<pre class="prettyprint">
// MixAll的wsAddr组装逻辑
public static String getWSAddr() {
    String wsDomainName = System.getProperty("rocketmq.namesrv.domain", DEFAULT_NAMESRV_ADDR_LOOKUP);
    String wsDomainSubgroup = System.getProperty("rocketmq.namesrv.domain.subgroup", "nsaddr");
    String wsAddr = "http://" + wsDomainName + ":8080/rocketmq/" + wsDomainSubgroup;
    if (wsDomainName.indexOf(":") > 0) {
        wsAddr = "http://" + wsDomainName + "/rocketmq/" + wsDomainSubgroup;
    }
    return wsAddr;
}

// TopAddressing.fetchNSAddr的url组装逻辑
String url = this.wsAddr;
if (!UtilAll.isBlank(this.unitName)) {
    url = url + "-" + this.unitName + "?nofix=1";
}					
</pre>	
					</div>
					</div>
					<div>
						<p>用于部署name server，并且会建立cluster表和name_server表的关联：</p>
						<p>1.“一键安装”将会分步骤进行，任何一个步骤失败自动暂停，解决问题后，点击“继续”执行。</p>
						<p>2. 安装成功后将会在“进程信息”处列出启动的NameServer进程。</p>
						<img src="${request.contextPath}/img/admin/intro/add_namesrv.png" style="width:900px;" class="img-rounded">
					</div>
					<div>
						<p>主要展示集群的状况，在此可以进行broker的运维：</p>
						<img src="${request.contextPath}/img/admin/intro/cluster_broker.png" style="width:900px;" class="img-rounded">		
						<p><b class="warn">注意:</b>broker上下线需要点击“刷新broker”按钮，手动刷新broker列表，从而更新监控列表。</p>
					</div>
					<div>
						<p>1. “一键安装”将会分步骤进行，任何一个步骤失败自动暂停，解决问题后，点击“继续”执行。</p>
						<p>2. 安装成功后将会在“进程信息”处列出启动的broker进程。</p>
						<p>3. 关键步骤解释：</p>
						<ul>
							<li>“生成配置文件”中的“topic配置”是指将尝试从集群中已存在的节点同步其topic配置，master启动时自动加载集群中已有的topic。</li>
							<li>“初始化配置”中如果成功执行os.sh将会生成/opt/mqcloud/.mq_cloud_inited，防止os.sh执行多次。</li>
							<li>“启动”阶段将会进行询问“是否自动启动？”，选择“否”，可以到服务器查看或更改配置后，再“继续”启动。</li>
						</ul>
						<img src="${request.contextPath}/img/admin/intro/add_master.png" style="width:900px;" class="img-rounded">
					</div>
					<div>
						<p>在“master”下线前，执行停写操作，可以暂时擦除broker的写权限，客户端将不再往此broker发送消息。</p>
						<img src="${request.contextPath}/img/admin/intro/no_write.png" style="width:900px;" class="img-rounded">
					</div>
					<div>
						<p>“下线”即关闭，对应linux的kill，slave可以直接下线，master需要先停写，再下线。</p>
						<img src="${request.contextPath}/img/admin/intro/offline.png" style="width:900px;" class="img-rounded">
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 流程审核 -->
<div id="auditModal" class="modal fade" tabindex="-1" data-width="400">
	<div class="modal-dialog" style="width:900px">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title">流程审核</h4>
			</div>
			<div class="modal-body">
				<div class="wizard">
					<ol>
						<li>审核列表</li>
						<li>新建topic</li>
						<li>关联生产者</li>
						<li>其他注意事项</li>
					</ol>
					<div class="text-center">
						<p>所有前端涉及到数据修改的请求都会发送到审核流程（用户信息修改除外）</p>
						<img src="${request.contextPath}/img/admin/intro/audit.png" style="width:840px" class="img-rounded" alt="选择topic">
					</div>
					<div class="text-center">
						<p>审核新建topic注意：测试的topic建在测试集群；如果拒绝，需要填写拒绝理由，详见下图：</p>
						<img src="${request.contextPath}/img/admin/intro/create_topic.png" class="img-rounded" alt="选择生产者">
					</div>
					<div class="text-center">
						<p>关联生产者之前需要“校验一下”，如果没有链接，需要咨询申请人，是否填错：</p>
						<img src="${request.contextPath}/img/admin/intro/associate_producer.png" class="img-rounded" alt="选择生产者">
					</div>
					<div>
						<b>审核这块最容易出问题，审核的时候一定要仔细，审核按钮不能点错！</b>
						<p>1. 跳过堆积：</p>
						<p>&nbsp;&nbsp;&nbsp;&nbsp;跳过堆积将会把偏移量重置到当前时间的前一分钟，客户端无需重启。</p>
						<p>&nbsp;&nbsp;&nbsp;&nbsp;跳过堆积无法重置重试队列的数据，如果重试队列大量堆积，建议客户端空消费，很快会清空。</p>
						<p>2. 删除消费者：</p>
						<p>&nbsp;&nbsp;&nbsp;&nbsp;为了保障数据的安全性，无人关联的消费者禁止删除，包括管理员。</p>
						<p>&nbsp;&nbsp;&nbsp;&nbsp;所以，如果需要删除，管理员可以自己关联一下消费者，然后发送删除申请。</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 监控 -->
<div id="monitorModal" class="modal fade" tabindex="-1" data-width="400">
	<div class="modal-dialog" style="width:1100px">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title">监控</h4>
			</div>
			<div class="modal-body">
				<div>
					<p>配置及展示默认监控指标阈值及自定义消费者监控指标阈值，部分邮件的监控报警数据来自这里，这里只保存最新的监控数据。</p>
					<img src="${request.contextPath}/img/admin/intro/monitor.png" style="width:1050px" class="img-rounded" alt="选择topic">
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 用户管理 -->
<div id="userModal" class="modal fade" tabindex="-1" data-width="400">
	<div class="modal-dialog" style="width:1100px">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title">用户管理</h4>
			</div>
			<div class="modal-body">
				<div>
					<p>所有注册用户可以从这里查看。</p>
					<img src="${request.contextPath}/img/admin/intro/user.png" style="width:1050px" class="img-rounded" alt="选择topic">
				</div>				
			</div>
		</div>
	</div>
</div>

<!-- 预警介绍 -->
<div id="machineModal" class="modal fade" tabindex="-1" data-width="400">
	<div class="modal-dialog" style="width:900px">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title">机器管理</h4>
			</div>
			<div class="modal-body">
				<div class="wizard">
					<ol>
						<li>机器列表</li>
						<li>添加机器</li>
						<li>机器监控</li>
						<li>监控预警</li>
					</ol>
					<div class="text-center">
						<p>MQCloud集群所有的机器可以在这里查看。</p>
						<img src="${request.contextPath}/img/admin/intro/machine.png" style="width:820px;" class="img-rounded" alt="选择topic">
					</div>
					<div>
						<p>添加机器前，需要按照初始化脚本，进行初始化。</p>
						<img src="${request.contextPath}/img/admin/intro/add_machine.png" class="img-rounded" alt="选择生产者">
					</div>
					<div>
						<p>点击ip会弹出监控页面，包含了load，内存，硬盘，网络等等指标。</p>
						<img src="${request.contextPath}/img/admin/intro/monitor_machine.png" style="width:830px;" class="img-rounded" alt="选择生产者">
					</div>
					<div class="text-center">
						<p>配置机器的预警参数，不填则不预警</p>
						<img src="${request.contextPath}/img/admin/intro/monitor_machine_config.png" class="img-rounded" alt="选择生产者">
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 客户端接入 -->
<div id="clientDemoModal" class="modal fade" tabindex="-1" data-width="400">
	<div class="modal-dialog" style="width:1000px">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title">其他</h4>
			</div>
			<div class="modal-body">
				<div class="wizard">
					<ol>
						<li>通知管理</li>
						<li>客户端版本</li>
					</ol>
					<div>
						<p>用于向前端展示通知，同时有效的只能有一条。</p>
						<img src="${request.contextPath}/img/admin/intro/notice.png" style="width:930px;" class="img-rounded" alt="选择生产者">
					</div>
					<div>
						<p>客户端启动时会从集群查询集群归属，消费方式等数据，并上报版本。</p>
						<img src="${request.contextPath}/img/admin/intro/client_version.png" style="width:930px;" class="img-rounded" alt="选择生产者">
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</div>

<script>
$(function(){
	$(".wizard").bwizard({backBtnText: "",nextBtnText: ""});
	$("#introLi").addClass("active");
	PR.prettyPrint();
});
</script>